<template>
  <view>
    <nav-bar title="会员管理" class="nav-bar" />
    <view class="search" :style="{ top: navBarHeight + 'px' }"
      ><search @searchVal="getSearchVal" placeholder="请输入会员手机号"></search
    ></view>
    <scroll-view
      @scrolltolower="handleNextPage"
      v-if="list.length > 0"
      scroll-y
      class="content"
      :style="{
        height: `calc(100vh - ${navBarHeight + searchHeight}px - 20rpx)`,
      }"
    >
      <view
        @click="jumpMemberDetail(item.id)"
        class="card flexAIC "
        v-for="item in list"
        :key="item.id"
      >
        <view class="lef"><image :src="item.headImg" mode=""></image></view>
        <view class="rig">
          <view class="top">
            <view class="name title-hidden-one">{{ item.customerName }}</view>
            <!-- <view class="phone">{{ item.phone }}</view> -->
          </view>
          <view class="midd">
            {{ item.phone }}
          </view>
          <view class="btm">
            <view
              >余额：<text
                >￥{{ item.totalBalance | formatCurrency }}</text
              ></view
            >
            <view class="num"
              >下单数量：<text>{{ item.payOrderCount }}</text></view
            >
          </view>
        </view>
      </view>
      <view class="blank-box"></view>
    </scroll-view>
    <view
      class="content"
      v-else
      :style="{
        marginTop: `calc(50% - ${searchHeight}px)`,
      }"
    >
      <xh-empty />
    </view>
  </view>
</template>

<script>
import search from "@/components/baseComponents/search/index.vue";
import { getMemberList } from "@/service/api/sp-member/member";
export default {
  components: { search },
  data() {
    return {
      ossBaseUrl: process.env.VUE_APP_BASE_FileUrl,
      navBarHeight: 60,
      searchHeight: 72,
      form: {
        pageNum: 1,
        pageSize: 10,
        // 会员手机号
        phone: "",
      },
      list: [],
      hasNextPage: true,
    };
  },
  created() {
    this.fetchMemberList(true);
  },
  mounted() {
    const navBar = this.uGetRect(".nav-bar");
    const search = this.uGetRect(".search");
    Promise.all([navBar, search]).then((res) => {
      this.navBarHeight = res[0].height;
      this.searchHeight = res[1].height;
    });
  },
  methods: {
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          [all ? "selectAll" : "select"](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
    getSearchVal(e) {
      this.form.phone = e;
      this.$nextTick(() => {
        this.fetchMemberList(true);
      });
    },
    jumpMemberDetail(e) {
      this.$Router.push({
        name: "memberDetail",
        params: {
          id: e,
        },
      });
    },
    async fetchMemberList(isClear = false) {
      if (isClear) {
        this.list = [];
        this.form.pageNum = 1;
      }
      const res = await getMemberList(this.form);
      if (res) {
        const { hasNextPage, list } = res;
        this.hasNextPage = hasNextPage;
        this.list = [...this.list, ...list];
      }
    },
    handleNextPage() {
      if (!this.hasNextPage) return;
      this.form.pageNum += 1;
      this.fetchMemberList();
    },
  },
};
</script>
<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.search {
  background-color: white;
  padding: 30rpx 24rpx;
  box-sizing: border-box;
  //position: fixed;
  z-index: 10;
}
.content {
  //position: relative;
  overflow: hidden;
  overflow-y: scroll;
  width: 100%;
  margin-top: 20rpx;
  .card {
    width: 686rpx;
    background: #ffffff;
    border-radius: 12rpx;
    margin: 0 auto;
    margin-bottom: 19rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 30rpx 26rpx;
    box-sizing: border-box;
    .lef {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 26rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .rig {
      flex: 2;
      .top {
        display: flex;
        justify-items: flex-start;
        font-size: 29rpx;
        color: #131313;
        .name {
          font-weight: bold;
        }
      }
      .midd{
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        opacity: 0.7;
        margin: 23rpx 0 30rpx;
      }
      .btm {
        display: flex;
        justify-items: flex-start;
        font-size: 26rpx;
        font-weight: 500;
        color: #131313;
        opacity: 0.7;
        text {
          color: #f05357;
        }
        .num {
          margin-left: 55rpx;
        }
      }
    }
  }
  .blank-box {
    width: 686rpx;
    height: 100rpx;
  }
}
</style>
